<template>
	<div>
		<div class="bg"></div>
		<!--头部-->
		<header id="header">
			<div class="header clearfix">
				<div class="header_left pull-left">
					<i class="iconfont" onclick="javascript:history.back(-1)">&#xe612;</i>
				</div>
				<div class="header_center">找回密码</div>
			</div>
		</header>
		<div class="main">
			<div class="input _width">
				<div class="input-each marginAuto">
					<span>手机号</span>
					<input type="text" ref="phone" placeholder="请输入手机号"/>
					<em class="gain" @click="getCode" v-if="gainOriginal">获取验证码</em>
	    			<em class="gain" v-if="gainNow">{{countDown}}s后重试</em>
				</div>
				<div class="input-each marginAuto">
					<span>动态码</span>
					<input type="text" ref="condition" placeholder="请输入验证码"/>
				</div>
				<div class="input-each marginAuto">
					<span>新密码</span>
					<input type="password" ref="pw" placeholder="请输入新密码"/>
				</div>
			</div>
		</div>
		<div class="findpw_button button" @click="findpw">
			<span class="baiColor">重置密码</span>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
		    	gainOriginal:true,	//获取验证码
		    	gainNow:false,		//倒计时
		    	countDown:"60",
		    	num:60,	
			}
		},
		mounted(){
			this.$refs.phone.focus();
		},
		methods:{
			//			获取验证码
			getCode:function(){
				var _this = this;
				var testPhone = new RegExp(/^1((3[0-9]{1})|(45)|(47)|(5[0-9]{1})|(76)|(77)|(78)|(8[0-9]{1}))\d{8}$/);
				var phone = _this.$refs.phone.value;
				if(phone == ""){
					alert("请输入您的手机号")
				}else if(testPhone.test(phone) == false){
					alert("手机号输入有误");
				}else{
					let params = new URLSearchParams();
					params.append('phone',phone);
					params.append('type',2);
					this.$axios({
						url:"One/Register/sendMsm",
						method:"post",
						data:params
					}).then(function(res){
						if(res.data.status == 0){
							alert("发送失败")
						}else if(res.data.status == 1){
				//				倒计时
							_this.gainOriginal = false;
							_this.gainNow = true;
							var countDown = _this.countDown;
							var num=_this.num;
							var timer=setInterval(function(){
								if(num >= 1){
									--num;
									_this.countDown = num
								}else{
									console.log(132)
										_this.gainOriginal = true;
										_this.gainNow = false;
										_this.countDown = _this.num;
										clearInterval(timer);
									}
							},1000);
								//倒计时结束
						}else if(res.data.status == 3){
							alert("此账号未注册")
						}
					}).catch(function(err){
						console.log(err)
					});
				}
			},
			//重置密码
			findpw(){
				var _this = this;
		  		var phone = _this.$refs.phone.value;		//手机号
		  		var condition = _this. $refs.condition.value;	//验证码
		  		var pw = _this.$refs.pw.value;	//密码
		  		if(phone == "" || pw == "" || condition == ""){
		  			alert("请完善您的信息");
		  		}else{
				var info = window.localStorage.data;
					var params = new URLSearchParams();
					params.append('phone',phone);
					params.append('vcode',condition);
					params.append('pwd',pw);
					this.$axios({
					   url:"One/Register/findPwd",
							method:"post",
							data:params
						 }).then(function(res){
							if(res.data.status == 0){
								alert("密码修改失败，请重新修改");
								_this.$refs.phone.value = "";
								_this. $refs.condition.value = "";
								_this.$refs.pw.value = "";
							}else if(res.data.status == 1){
								alert("密码重置成功");
								_this.$refs.phone.value = "";
								_this. $refs.condition.value = "";
								_this.$refs.pw.value = "";
								_this.$router.push("wlogin");
							}else if(res.data.status == 3){
								alert("此账号未注册");
							}else if(res.data.status == 4){
								alert("验证码输入错误");
								_this. $refs.condition.value = "";
							}
						}).catch(function(err){
							console.log(err)	
						})
		  		}
			},
		}
			
	}
</script>

<style scoped>
	@import "../css/public.css";
	@import "../css/wfindpw.css";
</style>